<template>
    <div>
        <van-skeleton title :row="3" v-if="list.length==0"/>
        <main class="main">
            
            <van-tabs>
                <van-tab title="推荐">
                    <van-swipe :autoplay="3000" lazy-render>
                        <van-swipe-item v-for="image in images" :key="image">
                            <img :src="image" style="width: 100%;height: 200px;" />
                        </van-swipe-item>
                    </van-swipe>
                    <p style="text-align: center;color: #ccc;">全球直采 正品保障 售后无忧 假一赔十</p>
                    <img src="@/assets/images/图片2_03.gif" alt="" style="width: 100%;">
                    <p>限时购35:19:55每天10点限时购买</p>
                    <img src="@/assets/images/图片2_02.gif" alt="" style="width: 100%;">

                </van-tab>
                <van-tab title="美食">
                  
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <ul style="column-count: 2;">
                            <li v-for="item in list" :key="item.id" style="break-inside: avoid;" @click="$router.push('/detail/'+item.id)" keep-alive>
                                <img :src="item.image" alt="" style="width: 100%;">
                                <p>{{ item.title }}</p>
                                <p>{{ item.price }}</p>
                            </li>
                        </ul>
                    </van-pull-refresh>



                </van-tab>
                <van-tab title="运动">内容 3</van-tab>
                <van-tab title="保健品">内容 4</van-tab>
                <van-tab title="内衣">内容 1</van-tab>
                <van-tab title="更多">内容 2</van-tab>

            </van-tabs>





        </main>

    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
import api from '@/api/api'
import { onMounted, ref } from 'vue'
const list = ref([])
onMounted(() => {
    api.get('/list', {
        params: { pagination: 1, pageNum: 30 }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
})

</script>

<style lang="scss" scoped></style>